<script>
import { computed, reactive, toRefs } from 'vue';
import { HomeFilled, Compass, Reading } from '@element-plus/icons-vue';
import $bus from '../bus';
import { useRoute } from 'vue-router';
export default {
	name: 'LeftMenu',
	components: { HomeFilled, Compass, Reading },
	emits: ['w'],
	setup(props, { emit }) {
		const route = useRoute();
		const data = reactive({
			isCollapse: false,
			routeName: computed(() => route.matched[route.matched.length - 1].path),
		});
		console.log(route, 'router');
		$bus.on('collapse', (res) => {
			data.isCollapse = res;
			emit('w', data.isCollapse);
		});
		return {
			...toRefs(data),
		};
	},
};
</script>
<template>
	<!-- 左侧菜单布局 -->
	<div class="left-menu">
		<el-menu :default-active="routeName" class="el-menu-h" router :collapse="isCollapse">
			<div class="title">宛励空间管理后台</div>
			<el-menu-item index="/home">
				<el-icon><HomeFilled /></el-icon>
				<template #title>首页</template>
			</el-menu-item>
			<el-menu-item index="/space">
				<el-icon><Compass /></el-icon>
				<template #title>空间</template>
			</el-menu-item>
			<el-menu-item index="/story">
				<el-icon><Reading /></el-icon>
				<template #title>故事会</template>
			</el-menu-item>
		</el-menu>
	</div>
</template>
<style lang="less">
.left-menu {
	width: 100%;
	height: 100%;

	.el-menu-h {
		height: 100%;
	}

	// .p {
	// 	width: 80%;
	// 	box-sizing: border-box;

	// 	border-radius: 4px;
	// 	background: linear-gradient(to bottom, #f2e8d5, #f2c066);
	// 	text-align: center;
	// 	margin: 0 auto 16px;
	// }
	.p1 {
		// width: 40px;
		// height: 40px;
		// border-radius: 4px;
		// background: linear-gradient(to bottom, #f2e8d5, #f2c066);
		// text-align: center;
	}
	// .logo {
	// 	width: 30px;
	// 	height: 30px;
	// 	margin-right: 10px;
	// 	margin-left: 4px;
	// }
	.title {
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		padding-top: 20px;
	}
}
</style>
